<html xmlns:th="http://www.thymeleaf.org">
<head>
<style>
.footer-navbar {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	height: 4.5rem;
}

.footer-navbar-brand {
	text-align: center;
	color: #838793 !important;
	padding-top: 0rem;
	padding-bottom: 0rem;
}

.selected-footer-navbar-brand {
	color: #d22018 !important;
}

.footer-navbar-brand span {
	font-size: 1rem;
}

.footer-navbar-brand .fa {
	display: block;
	font-size: 2rem;
}
</style>
</head>
<body>
	<div id="footer" v-cloak>
		<nav class="navbar fixed-bottom bg-light footer-navbar" v-show="showFooterFlag">
			<a class="navbar-brand footer-navbar-brand" v-on:click="goTo('/')" v-bind:class="{'selected-footer-navbar-brand': currentPathName == '/'}"><i class="fa fa-home" aria-hidden="true"></i> <span>首页</span> </a> <a class="navbar-brand footer-navbar-brand" v-on:click="goTo('/game-hall')" v-bind:class="{'selected-footer-navbar-brand': currentPathName == '/game-hall'}"><i class="fa fa-shopping-cart" aria-hidden="true"></i><span>游戏</span></a> <a class="navbar-brand footer-navbar-brand" v-on:click="goTo('/lottery-hall')" v-bind:class="{'selected-footer-navbar-brand': currentPathName == '/lottery-hall'}"><i class="fa fa-hourglass" aria-hidden="true"></i><span>开奖</span></a> <a class="navbar-brand footer-navbar-brand"><i class="fa fa-gift" aria-hidden="true"></i><span>优惠</span></a> <a class="navbar-brand footer-navbar-brand" v-on:click="goTo('/my-home-page')" v-bind:class="{'selected-footer-navbar-brand': currentPathName == '/my-home-page'}"><i class="fa fa-user" aria-hidden="true"></i><span>我的</span></a>
		</nav>
	</div>
	<script type="text/javascript">
		var footerVM = new Vue({
			el : '#footer',
			data : {
				currentPathName : '',
				showFooterFlag : true
			},
			computed : {},
			created : function() {
				this.currentPathName = window.location.pathname;
			},
			methods : {
				goTo : function(url) {
					window.location.href = url;
				}
			}
		});
	</script>
</body>
</html>
